<template>
	<view class="content poRel">
		<view class="" v-if="Object.keys(datalist).length > 0">

			
			<view class="wid100 top" :style="'background-color: '+theme.main_color+';'">
				<view style="height: 40rpx;"></view>
				<view v-if="pd != 1">
					<view class="fowe600 coFFF foSi40 wid90 mar" v-if="datalist.service_status == -1">已拒单</view>
					<view class="fowe600 coFFF foSi40 wid90 mar" v-if="datalist.service_status == 0">待接单</view>
					<view class="fowe600 coFFF foSi40 wid90 mar" v-if="datalist.service_status == 1">已接单</view>
					<view class="fowe600 coFFF foSi40 wid90 mar" v-if="datalist.service_status == 2">已出发</view>
					<view class="fowe600 coFFF foSi40 wid90 mar" v-if="datalist.service_status == 3">已到达</view>
					<view class="fowe600 coFFF foSi40 wid90 mar" v-if="datalist.service_status == 4">开始服务</view>
					<view class="fowe600 coFFF foSi40 wid90 mar" v-if="datalist.service_status >= 5">已完成</view>
				</view>
				<view v-if="pd == 1">
					<view class="fowe600 coFFF foSi40 wid90 mar" 
					v-if="datalist.pay_status == 0 && datalist.service_status != -2">待支付</view>
					<view class="fowe600 coFFF foSi40 wid90 mar" 
					v-if="datalist.service_status >= 0 && datalist.pay_status == 1 && datalist.service_status <=3">待服务</view>
					<view class="fowe600 coFFF foSi40 wid90 mar" 
					v-if="datalist.service_status == 4 && datalist.service_status <= 4 && datalist.pay_status != 0">已接单</view>
					<view class="fowe600 coFFF foSi40 wid90 mar" 
					v-if="datalist.service_status == 2">服务中</view>
					<view class="fowe600 coFFF foSi40 wid90 mar" 
					v-if="datalist.service_status >= 5 && datalist.pay_status != 0">已完成</view>
					<view class="fowe600 coFFF foSi40 wid90 mar" 
					v-if="datalist.service_status == -2">已取消</view>
				</view>
			</view>
			<view class="wid90 mar bacFFF borRad20" style="padding: 40rpx 0;margin-top: -70rpx;">
				<view class="wid90 mar dis disAl">
					<view class="wid20 c" style="">
						<view class="dis disJuC">
							<image v-if="datalist.service_status >= 1" src="../../static/jishijiedan.png" style="width: 49rpx;height: 55rpx;"></image>
							<image v-else src="../../static/order/jishijiedan0.png" style="width: 49rpx;height: 55rpx;"></image>
						</view>
						<view class="mar-top20 foSi22 " :style="{'color' : datalist.service_status >= 1 ? theme.main_color : '#aeaeae'}">技师接单</view>
					</view>
					<view class="wid20 c">
						<view class="dis disJuC">
							<image v-if="datalist.service_status >= 2" src="../../static/jishichufa.png" style="width: 51rpx;height: 53rpx;"></image>
							<image v-else src="../../static/order/jishichufa0.png" style="width: 49rpx;height: 55rpx;"></image>
						</view>
						<view class="mar-top20 foSi22 "  :style="{'color' : datalist.service_status >= 2 ? theme.main_color : '#aeaeae'}">技师出发</view>
					</view>
					<view class="wid20 c">
						<view class="dis disJuC">
							<image v-if="datalist.service_status >= 3"  src="../../static/jishidaoda.png" style="width: 51rpx;height: 58rpx;"></image>
							<image v-else src="../../static/order/jishidaoda0.png" style="width: 49rpx;height: 55rpx;"></image>
						</view>
						<view class="mar-top20 foSi22 " :style="{'color' : datalist.service_status >= 3 ? theme.main_color : '#aeaeae'}">技师到达</view>
					</view>
					<view class="wid20 c">
						<view class="dis disJuC">
							<image v-if="datalist.service_status >= 4" src="../../static/fuwuzhong.png" style="width: 46rpx;height: 54rpx;"></image>
							<image v-else src="../../static/order/fuwuzhong0.png" style="width: 49rpx;height: 55rpx;"></image>
						</view>
						<view class="mar-top20 foSi22 "  :style="{'color' : datalist.service_status >= 4 ? theme.main_color : '#aeaeae'}">开始服务</view>
					</view>
					<view class="wid20 c">
						<view class="dis disJuC">
							<image v-if="datalist.service_status >= 5"  src="../../static/fuwuwancheng.png" style="width: 47rpx;height: 49rpx;"></image>
							<image v-else src="../../static/order/fuwuwancheng0.png" style="width: 49rpx;height: 55rpx;"></image>
						</view>
						<view class="mar-top20 foSi22 " :style="{'color' : datalist.service_status >= 5 ? theme.main_color : '#aeaeae'}">服务完成</view>
					</view>
				</view>
			</view>
			<view class="wid90 mar borRad20 mar-top20 bacFFF" style="padding: 30rpx 0;">
				<view class="wid90 mar">
					<view class="dis disAl fowe800 foSi30">服务内容</view>
					<view class="dis disAl mar-top20">
						<view style="height: 142rpx;width: 27%;">
							<image :src="datalist.service.cover_img" class="hei100 borRad10" style="width: 142rpx;"></image>
						</view>
						<view style="width: 73%;">
							<view class="foSi30 fowe800" style="line-height: 40rpx;">{{datalist.service.name}}</view>
							<view class="mar-top10 foSi20" style="color: #878787;">服务技师：{{datalist.tech_name}}</view>
							<view class="dis disAl disJuB mar-top10 foSi25">
								<view>
									<view class="foSi20" style="color: #878787;">服务时长：{{datalist.time_long}}分钟</view>
									<span class="mar-top10" style="color: #FF0000;">¥{{datalist.service_price}}</span>
								</view>
								<view>×{{datalist.service_num}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="datalist.address" class="wid90 mar bacFFF borRad20 mar-top20" style="padding: 30rpx 0;">
				<view class="wid90 mar foSi25">
					<view class="dis disAl disJuB">
						<view style="color: #878787;">下单人</view>
						<view>{{datalist.user.nickname}}</view>
					</view>
					
					<view class="dis disAl disJuB mar-top20">
						<view style="color: #878787;">联系方式</view>
						<view>{{datalist.address.mobile}}</view>
					</view>
					<view class="dis disAl disJuB mar-top20">
						<view style="color: #878787;">服务地址</view>
						<view>{{datalist.address.address}}{{datalist.address.address_info}}</view>
					</view>
				</view>
			</view>
			<view class="wid90 mar bacFFF borRad20 mar-top20">
				<view style="height: 30rpx;"></view>
				<view class="wid90 mar foSi25">
					<view class="dis disAl disJuB">
						<view style="color: #878787;">下单时间</view>
						<view>{{datalist.createtime}}</view>
					</view>
					<view class="dis disAl disJuB mar-top20" v-if="datalist.service_status >= 4">
						<view style="color: #878787;">服务时间</view>
						<view>{{datalist.start_time}}</view>
					</view>
					<view class="dis disAl disJuB mar-top20">
						<view style="color: #878787;">服务时长</view>
						<view>{{datalist.time_long}}分钟</view>
					</view>
					<view class="dis disAl disJuB mar-top20">
						<view style="color: #878787;">车费详情</view>
						<view>出租车 全程{{datalist.distance}}km</view>
					</view>
					<view class="dis disAl disJuB mar-top20">
						<view style="color: #878787;">出行费用</view>
						<view>出租车 ¥{{datalist.car_price}}</view>
					</view>
					<view class="dis disAl disJuB mar-top20">
						<view style="color: #878787;">服务项目费用</view>
						<view>¥{{datalist.service_price}}</view>
					</view>
					<view class="dis disAl disJuB mar-top20">
						<view style="color: #878787;">支付方式</view>
						<view>{{datalist.pay_type == 1 ? '微信支付' : datalist.pay_type == 2 ? '余额支付' : '支付宝支付'}}</view>
					</view>
					<view class="wid100 xia mar-top20"></view>
					<view class="dis disAl" style="height: 72rpx;justify-content: flex-end;">
						<span>总计：</span>
						<span style="color: #FF0000;">¥{{datalist.total_price}}</span>
					</view>
				</view>
			</view>
			<view class="wid90 mar bacFFF borRad20 mar-top20" v-if="datalist.service_status > 0">
				<view style="height: 30rpx;"></view>
				<block v-if="datalist.service_status >= 1">
					<view class="wid90 mar poRel">
						<view class="dis disAl ">
							<view style="width: 10%;">
								<image src="../../static/yiwancheng.png" class="poRel"
									style="width: 30rpx;height: 30rpx;z-index: 5;"></image>
							</view>
							<view class="wid90 foSi25">技师接单</view>
						</view>
						<view class="dis disAl">
							<view style="width: 10%;"></view>
							<view class="wid90 foSi25 mar-top10" style="color: #878787;">
								<view>{{datalist.receiving_time}}</view>
								<!-- <image src="../../static/tu1.png" class="mar-top20 borRad10"
									style="width: 254rpx;height: 122rpx;"></image>
								<view class="dis disAl mar-top10">
									<uni-icons type="location" size="35rpx" color="#00C82D"></uni-icons>
									<view class="mar-left10 foSi20 fowe600">长春市南关区XX街道XX小区</view>
								</view> -->
							</view>
						</view>
						<view class="hei20"></view>
						<view  class="hei100 poAbs"
							style="left: 14rpx;top: 20rpx;width: 1rpx;background-color: #E5E5E5;z-index: 1;"></view>
					</view>
				</block>
				<block v-if="datalist.service_status >= 2">
					<view class="wid90 mar poRel">
						<view class="dis disAl ">
							<view style="width: 10%;">
								<image src="../../static/yiwancheng.png" class="poRel"
									style="width: 30rpx;height: 30rpx;z-index: 5;"></image>
							</view>
							<view class="wid90 foSi25">技师出发</view>
						</view>
						<view class="dis disAl">
							<view style="width: 10%;"></view>
							<view class="wid90 foSi25 mar-top10" style="color: #878787;">
								<view>{{datalist.serout_time}}</view>
								<!-- <image src="../../static/tu1.png" class="mar-top20 borRad10"
									style="width: 254rpx;height: 122rpx;"></image> -->
								<view class="dis disAl mar-top10">
									<uni-icons type="location" size="35rpx" :color="theme.main_color"></uni-icons>
									<view class="mar-left10 foSi20 fowe600">{{datalist.trip_start_address}}</view>
								</view>
							</view>
						</view>
						<view class="hei20"></view>
						<view  class="hei100 poAbs"
							style="left: 14rpx;top: 20rpx;width: 1rpx;background-color: #E5E5E5;z-index: 1;"></view>
					</view>
				</block>
				<block v-if="datalist.service_status >= 3">
					<view class="wid90 mar poRel">
						<view class="dis disAl ">
							<view style="width: 10%;">
								<image src="../../static/yiwancheng.png" class="poRel"
									style="width: 30rpx;height: 30rpx;z-index: 5;"></image>
							</view>
							<view class="wid90 foSi25">技师到达</view>
						</view>
						<view class="dis disAl">
							<view style="width: 10%;"></view>
							<view class="wid90 foSi25 mar-top10" style="color: #878787;">
								<view>{{datalist.arrive_time}}</view>
								<image :src="datalist.arrive_img" class="mar-top20 borRad10"
									style="width: 254rpx;height: 122rpx;"></image>
								<view class="dis disAl mar-top10">
									<uni-icons type="location" size="35rpx" :color="theme.main_color"></uni-icons>
									<view class="mar-left10 foSi20 fowe600">{{datalist.trip_end_address}}</view>
								</view>
							</view>
						</view>
						<view class="hei20"></view>
						<view  class="hei100 poAbs"
							style="left: 14rpx;top: 20rpx;width: 1rpx;background-color: #E5E5E5;z-index: 1;"></view>
					</view>
				</block>
				<block v-if="datalist.service_status >= 4">
					<view class="wid90 mar poRel">
						<view class="dis disAl ">
							<view style="width: 10%;">
								<image src="../../static/yiwancheng.png" class="poRel"
									style="width: 30rpx;height: 30rpx;z-index: 5;"></image>
							</view>
							<view class="wid90 foSi25">开始服务</view>
						</view>
						<view class="dis disAl">
							<view style="width: 10%;"></view>
							<view class="wid90 foSi25 mar-top10" style="color: #878787;">
								<view>{{datalist.start_time}}</view>
								<!-- <image :src="datalist.arrive_img" class="mar-top20 borRad10"
									style="width: 254rpx;height: 122rpx;"></image>
								<view class="dis disAl mar-top10">
									<uni-icons type="location" size="35rpx" color="#00C82D"></uni-icons>
									<view class="mar-left10 foSi20 fowe600">{{datalist.trip_end_address}}</view>
								</view> -->
							</view>
						</view>
						<view class="hei20"></view>
						<view  class="hei100 poAbs"
							style="left: 14rpx;top: 20rpx;width: 1rpx;background-color: #E5E5E5;z-index: 1;"></view>
					</view>
				</block>
				<block v-if="datalist.service_status >= 5">
					<view class="wid90 mar poRel">
						<view class="dis disAl ">
							<view style="width: 10%;">
								<image src="../../static/yiwancheng.png" class="poRel"
									style="width: 30rpx;height: 30rpx;z-index: 5;"></image>
							</view>
							<view class="wid90 foSi25">服务结束</view>
						</view>
						<view class="dis disAl">
							<view style="width: 10%;"></view>
							<view class="wid90 foSi25 mar-top10" style="color: #878787;">
								<view>{{datalist.end_time}}</view>
								<image :src="datalist.end_service_img" class="mar-top20 borRad10"
									style="width: 254rpx;height: 122rpx;"></image>
								<view class="dis disAl mar-top10">
									<uni-icons type="location" size="35rpx" :color="theme.main_color"></uni-icons>
									<view class="mar-left10 foSi20 fowe600">{{datalist.trip_end_address}}</view>
								</view>
							</view>
						</view>
						<view class="hei20"></view>
						<view  class="hei100 poAbs"
							style="left: 14rpx;top: 20rpx;width: 1rpx;background-color: #E5E5E5;z-index: 1;"></view>
					</view>
				</block>
				<!-- <block>
					<view class="wid90 mar poRel">
						<view class="dis disAl ">
							<view style="width: 10%;">
								<image src="../../static/yiwancheng.png" class="poRel"
									style="width: 30rpx;height: 30rpx;z-index: 5;"></image>
							</view>
							<view class="wid90 foSi25">技师接单</view>
						</view>
						<view class="dis disAl">
							<view style="width: 10%;"></view>
							<view class="wid90 foSi25 mar-top10" style="color: #878787;">
								<view>2024-06-20 11:10:00</view>
								<image src="../../static/tu1.png" class="mar-top20 borRad10"
									style="width: 254rpx;height: 122rpx;"></image>
								<view class="dis disAl mar-top10">
									<uni-icons type="location" size="35rpx" color="#00C82D"></uni-icons>
									<view class="mar-left10 foSi20 fowe600">长春市南关区XX街道XX小区</view>
								</view>
							</view>
						</view>
						<view class="hei20"></view>
						<view v-if="index+1 != 3" class="hei100 poAbs"
							style="left: 14rpx;top: 20rpx;width: 1rpx;background-color: #E5E5E5;z-index: 1;"></view>
					</view>
				</block> -->
				<view style="height: 50rpx;"></view>
			</view>
			<view style="height: 50rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				id: 0,
				tech_id: null,
				datalist: {},
				pd: 0,
				theme: null
			}
		},
		
		onLoad(option) {
			this.theme = uni.getStorageSync('theme')
			this.id = option.id
			this.tech_id = option.tech_id
			this.pd = option.pd
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() {
				var that = this
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: that.global.url + 'api/qianyu_smfw/tech/tech_order_details',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						'token': uni.getStorageSync('token')
					},
					data: {
						tech_id: that.tech_id?that.tech_id:uni.getStorageSync('tech_id'),
						orderid: that.id
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.datalist = result.data
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none',
								duration: 2000
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #F3F1F1;
	}

	.xia {
		height: 1rpx;
		background-color: #E5E5E5;
	}

	.top {
		height: 193rpx;
		border-radius: 0rpx 0rpx 50rpx 50rpx;
	}
	.c{
		display: flex;flex-direction: column;align-items: center;
	}
</style>